<template>
  <div>
    <div ref="xxx">{{ num }}</div>
    <button @click="btnClick">点击++</button>
    <input type="text" ref="input" v-if="bol" />
    <button @click="btnClick2">点击input聚焦</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: 1,
      bol: false
    }
  },
  methods: {
    btnClick () {
      this.num++
      // $nextTick:它前面的数据渲染完成后再执行它的回调
      // this.$nextTick(()=>{})
      this.$nextTick(() => {
        console.log(this.$refs.xxx.innerHTML)
      })
    },
    btnClick2 () {
      this.bol = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    }
  }
}
</script>
<style></style>
